<template>
  <div class="distribute-container">
    <div style="position:relative">
      <el-select
        v-model="value"
        @change="selectChange"
        filterable
        placeholder="请选择销售人员"
      >
        <el-option
          v-for="item in options"
          :key="item.sellerId"
          :label="item.sellerName"
          :value="item.sellerId"
        >
        </el-option>
      </el-select>
      <el-transfer
        @change="handleChange"
        v-model="table1"
        filterable
        :titles="['客户池', '拥有客户']"
        :button-texts="['到左边', '到右边']"
        :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
        :data="table2"
      >
      </el-transfer>
      <div style="position:relative; top:40px;display: flex;justify-content: center;">
        <el-button type="primary" @click="goback">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
import { getAllSellers, getCusBySellerId, getNewCus, assignCustomer, resetCustomer } from "@/api/distribute";
export default {
  name: 'Distribute',
  mixins: [ResizeMixin],
  data () {
    return {
      value: '',
      options: [],
      table1: [],
      table2: [],
    }

  },
  methods: {
    init () {
      getAllSellers().then(res => {
        this.options = res.data
      }).catch(err => {
        console.log('error')
      })
      getNewCus().then(res => {
        this.table2 = res.data.map(item => { return { key: item, label: item + "" } });
      }).catch(err => {
        console.log('error')
      })
      return true;
    },
    jump () {
      this.$router.push({ path: '/success' })
    },
    handleChange (value, direction, movedKeys) {
      if(this.value===''){
        this.$message('请选择销售人员')
        return;
      }
      if(direction==='right'){
        assignCustomer({newCustomerIds:value,sellerId:this.value}).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log('error');
        })
      }
      if(direction=='left'){
        resetCustomer({customerIds:movedKeys}).then(res=>{
          console.log(res);
        }).catch(err=>{
          console.log('error');
        })
      }
    },
    selectChange (val) {
        getNewCus().then(res => {
        this.table2 = res.data.map(item => { return { key: item, label: item + "" } });
       getCusBySellerId({ sellerId: val }).then(res => {
        let temp = res.data.map(item => { return { key: item, label: item + "" } })
        this.table2 = this.table2.concat(temp)
        this.table1 = res.data
      })
      }).catch(err => {
        console.log('error')
      })
    },
     goback(){
      this.$router.push({ path: '/' })
    }
  },
  created () {
    this.init()
  },
}
</script>

<style scoped>
.distribute-container {
  min-width: 770px;
  min-height: 90vh;
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  padding: 1.25rem;
  border-radius: 5px;
  display: flex;
  justify-content: center;
}
.el-select {
  position: absolute;
  right: 0;
  height: 40px;
  width: 199px;
}
.el-transfer {
  position: relative;
  top: 40px;
}
</style>